quarto presentation

with Revealjs

Author

Tony Duan

1 revealjs YAML

Code

---
title: "Habits"
author: "John Doe"
format: revealjs
---

2 pages

Code

## Getting up

- Turn off alarm
- Get out of bed

## Breakfast

- Eat eggs
- Drink coffee

3 YAML format setting

Code

format:
  revealjs:
    controls: true
    navigation-mode: vertical
    height: 800
    width: 1000    
    fontsize: 20pt
    page-layout: full
    logo: images/logo.jpg
    footer: "This is footer(https://google.com/)"
    slide-number: c
    show-slide-number: all
    menu: false

3.1 if Produce a standalone HTML file with no external dependencies

Code

format:
  revealjs:
    embed-resources:true

4 Main Title Slide Background YAML setting

Code

---
title: My Slide Show
title-slide-attributes:
    data-background-image: /path/to/title_image.png
    data-background-size: contain
    data-background-opacity: "0.5"
---

5 Chalkboard YAML setting

Code

---
title: "Presentation"
format:
  revealjs:
    chalkboard: true
---

6 center whole page

Code

# This will be centered {.center}

This text is moved as well

7 revealjs example

7.1 if add to a quart website,need to install embedio quarto extension in project folder first

Code

quarto add coatless-quarto/embedio

7.2 quarto code

---
title: "Quarto revealjs Presentation"
format:
  revealjs:
    embed-resources: true
    transition: slide
    background-transition: fade
    
---


## Getting up

- Turn off alarm
- Get out of bed

---

## Going to sleep

- Get in bed
- Count sheep


---

<div style="display: flex; justify-content: center; align-items: center; height: 60vh;">
  <div style="font-size: 100px; font-weight: bold;">Thank you</div>
</div>

View slides in full screen

8 reference:

https://quarto.org/docs/presentations/revealjs/

---
title: "quarto presentation"
subtitle: "with Revealjs"

author: "Tony Duan"

execute:
  warning: false
  error: false
  eval: false
  
format:
  html:
    toc: true
    toc-location: right
    code-fold: show
    code-tools: true
    number-sections: true
    code-block-bg: true
    code-block-border-left: "#31BAE9"
    code-copy: true
---

# revealjs YAML

```{r}
---
title: "Habits"
author: "John Doe"
format: revealjs
---
```

# pages
```{r}
## Getting up

- Turn off alarm
- Get out of bed

## Breakfast

- Eat eggs
- Drink coffee
```



# YAML format setting

```{r}
format:
  revealjs:
    controls: true
    navigation-mode: vertical
    height: 800
    width: 1000    
    fontsize: 20pt
    page-layout: full
    logo: images/logo.jpg
    footer: "This is footer(https://google.com/)"
    slide-number: c
    show-slide-number: all
    menu: false
```

## if Produce a standalone HTML file with no external dependencies

```{r}
format:
  revealjs:
    embed-resources:true
```



# Main Title Slide Background YAML setting

```{r}
---
title: My Slide Show
title-slide-attributes:
    data-background-image: /path/to/title_image.png
    data-background-size: contain
    data-background-opacity: "0.5"
---
```


# Chalkboard YAML setting

```{r}
---
title: "Presentation"
format:
  revealjs:
    chalkboard: true
---
```


# center whole page

```{r}
# This will be centered {.center}

This text is moved as well
```

# revealjs example

## if add to a quart website,need to install embedio quarto extension in project folder first


```{r}
#| eval: false
quarto add coatless-quarto/embedio
```

## quarto code

````
---
title: "Quarto revealjs Presentation"
format:
  revealjs:
    embed-resources: true
    transition: slide
    background-transition: fade
    
---


## Getting up

- Turn off alarm
- Get out of bed

---

## Going to sleep

- Get in bed
- Count sheep


---

<div style="display: flex; justify-content: center; align-items: center; height: 60vh;">
  <div style="font-size: 100px; font-weight: bold;">Thank you</div>
</div>
````

{{< revealjs "revealjs.html" >}}

# reference:
https://quarto.org/docs/presentations/revealjs/